<template>
  <div>
    <el-form :inline="true" :model="searchForm" ref="formRef" style="display: flex;flex-direction: row;">
      <el-form-item label="类型" prop="wxUserId">
        <el-select v-model="searchForm.type" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">查询</el-button>
        <el-button @click="onReset(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="state.tableData" border style="width: 100%">
      <el-table-column prop="subjectName" label="名称" />
      <el-table-column prop="sportType" label="项目" />
      <el-table-column prop="region" label="区域" />
      <el-table-column prop="createdDate" label="时间" />
      <el-table-column prop="contactInfo" label="联系" />
      <el-table-column prop="leaveMessage" label="类型">
        <template #default="scope">
          <el-tag type="success" v-show="scope.row.contentType === PostContentTypeEnum.FIND_PLAYER">找人</el-tag>
          <el-tag type="success" v-show="scope.row.contentType === PostContentTypeEnum.FIND_TEAM">找队</el-tag>
          <el-tag type="success" v-show="scope.row.contentType === PostContentTypeEnum.CHALLENGE">约战</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="leaveMessage" label="留言" />
      <el-table-column label="操作" width="350">
        <template #default="scope">
          <el-button @click="handleDelete(scope.row.partnershipPostId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="state.total" :limit="state.pageSize" :page-change="PageChange" />

  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
import Pagination from '@/components/pagination/index.vue'
import { findPartnership, deletePartnership } from "@/api/base"
import { PostContentTypeEnum } from '../enum'

const options = [
  {
    label: '找人',
    value: PostContentTypeEnum.FIND_PLAYER
  },
  {
    label: '找队',
    value: PostContentTypeEnum.FIND_TEAM
  },
  {
    label: '约战',
    value: PostContentTypeEnum.CHALLENGE
  }
]

const formRef = ref<FormInstance>();
const searchForm = reactive({
  type: "",
});

const state = reactive({
  tableData: [],
  total: 0,
  pageNum: 1,
  pageSize: 10
})

const getTableData = () => {
  findPartnership({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
    extraParamMap: {
      contentType: searchForm.type
    }
  }).then(res => {
    state.tableData = res.data.rows || []
    state.total = res.data.total || 0
  })
}
getTableData()

// 重置按钮
const onReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  getTableData()
};

// 分页
const PageChange = (page: number) => {
  state.pageNum = page;
  getTableData()
}
// 删除
const handleDelete = (id: number) => {
  ElMessageBox.confirm(
    '确定删除该选项?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deletePartnership({
        partnershipPostId: id
      }).then(res => {
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: res.msg,
          })
          getTableData()
        }
      })
    })
}
</script>

<style lang="scss" scoped>
.table-img {
  width: 60px;
  height: 60px;
}

.el-form .el-form-item:last-of-type {
  margin-bottom: 18px !important;
}
</style>